<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input class="filter-item" v-model="listQuery.hotel_name" placeholder="酒店名称" style="width: 220px;" clearable/>

      <el-input class="filter-item" v-model="listQuery.basic_room_type_id" placeholder="子物理房型ID" style="width: 220px;" clearable/>

      <el-input class="filter-item" v-model="listQuery.basic_room_type_name" placeholder="子物理房型名称" style="width: 220px;" clearable/>

      <el-input class="filter-item" v-model="listQuery.room_type_name" placeholder="售卖房型名称" style="width: 220px;" clearable/>

      <el-select class="filter-item" v-model="listQuery.is_sales_room_type_info" placeholder="是否存在售卖房型信息" style="width: 200px" clearable>
        <el-option label="否" :value="0" />
        <el-option label="是" :value="1" />
      </el-select>

      <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="酒店ID" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.hotel_id }}
        </template>
      </el-table-column>

      <el-table-column label="酒店名称" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.hotel.inn_name }}
        </template>
      </el-table-column>

      <el-table-column label="子物理房型ID" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.basic_room_type_id }}
        </template>
      </el-table-column>

      <el-table-column label="子物理房型名称" min-width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.sub_basic_room_type.basic_room_type_name }}
        </template>
      </el-table-column>

      <el-table-column label="售卖房型ID" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column label="售卖房型名称" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.room_type_name }}
        </template>
      </el-table-column>

      <el-table-column label="早餐" min-width="110" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.breakfast === 0">无早</span>
          <span v-else-if="scope.row.breakfast === 2">单早</span>
          <span v-else-if="scope.row.breakfast === 3">双早</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>

      <el-table-column label="当日成本价" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.current_sales_room_type_info ? scope.row.current_sales_room_type_info.advance_rate : "--" }}
        </template>
      </el-table-column>

      <el-table-column label="当日售价" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.current_sales_room_type_info ? scope.row.current_sales_room_type_info.price : "--" }}
        </template>
      </el-table-column>

      <el-table-column label="当日房量" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.current_sales_room_type_info ? scope.row.current_sales_room_type_info.room_quantity : "--" }}
        </template>
      </el-table-column>

      <el-table-column label="当日房态" min-width="110" align="center">
        <template slot-scope="scope">
          <el-switch v-if="scope.row.current_sales_room_type_info" v-model="scope.row.current_sales_room_type_info.status" active-color="#13ce66" :active-value="1" :inactive-value="0" @change="handleChangeSalesRoomTypeInfoStatus(1, scope.row.id, scope.row.current_sales_room_type_info.id)"></el-switch>
          <span v-else>--</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250" align="center" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="handleDailyPrice(scope.row)">每日价格</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[5,10,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <!-- 每日价格 -->
    <el-dialog title="每日价格" :visible.sync="dialogVisibleDailyPrice" width="60%" :close-on-click-modal="false">
      <table v-if="salesRoomTypeInfos.length" class="table-box">
        <tr v-for="(chunk, chunkIndex) in salesRoomTypeInfos" :key="`chunk${chunkIndex}`">
          <td v-for="(item, itemIndex) in chunk" :key="`item${itemIndex}`">
            <div class="item-box">
              <div style="text-align: center;">{{ item.effect_date }}</div>
              <div>{{ `成本价：￥${item.advance_rate}` }}</div>
              <div>{{ `售价：￥${item.price}` }}</div>
              <div>{{ `房量：${item.room_quantity}` }}</div>
              <div>
                <span style="margin-right: 5px;">房态：</span>
                <el-switch v-model="item.status" active-color="#13ce66" :active-value="1" :inactive-value="0" @change="handleChangeSalesRoomTypeInfoStatus(2, item.room_type_id, item.id)"></el-switch>
              </div>
            </div>
          </td>
        </tr>
      </table>
      <div v-else style="text-align: center;">暂无数据</div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleDailyPrice = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 每日价格 -->
  </div>
</template>

<script>
  import request from "@/utils/request";

  export default {
    data() {
      return {
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
          hotel_name: "",
          basic_room_type_id: "",
          basic_room_type_name: "",
          room_type_name: "",
          is_sales_room_type_info: "",
        },
        // 每日价格
        dialogVisibleDailyPrice: false,
        salesRoomTypeInfos: [],
      };
    },
    created() {
      if (this.$route.query.basic_room_type_id) {
        this.listQuery.basic_room_type_id = parseInt(this.$route.query.basic_room_type_id || 0);
      }
      this.getList();
    },
    methods: {
      getList() {
        this.listLoading = true;
        request({
          url: "/api/backend/room/salesRoomTypeList",
          method: "get",
          params: this.listQuery,
        }).then(response => {
          this.list = response.data.items;
          this.total = response.data.total;
          this.listLoading = false;
        });
      },
      getEffectSalesRoomTypeInfo(roomTypeId) {
        request({
          url: "/api/backend/room/effectSalesRoomTypeInfo",
          method: "get",
          params: {
            room_type_id: roomTypeId,
          }
        }).then(response => {
          let salesRoomTypeInfos = response.data;
          // 分割数组
          const chunkSize = 7;
          const chunks = [];
          for (let i = 0; i < salesRoomTypeInfos.length; i += chunkSize) {
            let chunk = salesRoomTypeInfos.slice(i, i + chunkSize);
            chunks.push(chunk);
          }
          this.salesRoomTypeInfos = chunks;
        });
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      // 改变售卖房型信息状态
      handleChangeSalesRoomTypeInfoStatus(type, roomTypeId, roomTypeInfoId){
        this.listLoading = true
        request({
          url: "/api/backend/room/changeSalesRoomTypeInfoStatus",
          method: "post",
          data: {
            id: roomTypeInfoId
          },
        }).then(() => {
        }).catch(() => {
        }).finally(() => {
          if (type === 1) {
            this.getList();
          } else if (type === 2) {
            this.getEffectSalesRoomTypeInfo(roomTypeId);
          }
          this.listLoading = false;
        });
      },
      // 每日价格
      handleDailyPrice(row) {
        this.getEffectSalesRoomTypeInfo(row.id);
        this.dialogVisibleDailyPrice = true;
      },
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.table-box {
  border-collapse: collapse;
  tr {
    td {
      width: 160px;
      height: 160px;
      border: 1px solid #ccc;
      padding: 10px;
      .item-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }
}
</style>
